<template>
  <div class="base-info-view">
    <div class="price-container">
      <el-form
        class="form-detail"
        label-position="right"
        label-width="120px"
      >
        <el-row
          :gutter="20"
          style="width:100%"
        >
          <el-col :span="8">
            <el-form-item
              label="流程编号："
              style="width: 100%;"
            >
              <span>{{ detailData.processNo }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="创建时间："
              style="width: 100%;"
            >
              {{ dateFormat('yyyy-mm-dd HH:MM', detailData.startTime) }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="创建人："
              style="width: 100%;"
            >
              <span>{{ detailData.initiator }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <item-title title="产品价格信息" />
      <el-form
        class="form-detail"
        label-position="right"
        label-width="120px"
        style="padding-left:20px;"
      >
        <el-row
          :gutter="20"
          style="width:100%"
        >
          <el-form-item
            label="产品编号："
            style="width: 50%"
          >
            <div>{{ data?.Old?.productNumber }}</div>
          </el-form-item>
          <el-form-item
            label="产品名称："
            style="width: 50%"
          >
            <div>{{ getProductName(data?.Old) }}</div>
          </el-form-item>
          <el-form-item
            label="价格编号："
            style="width: 50%"
          >
            <div>{{ data?.Old?.priceNumber }}</div>
          </el-form-item>
          <el-form-item
            label="准入模式："
            style="width: 50%"
          >
            <div
              v-if="data?.accessMode!==data?.Old?.accessMode"
              class="flow-status-color"
            >
              <span>{{ getLabel('access_mode', data?.Old?.accessMode) }}</span>
              <span>--></span>
              <span>{{ getLabel('access_mode', data?.accessMode) }}</span>
            </div>
            <div v-else><span>{{ getLabel('access_mode', data?.accessMode) }}</span></div>
          </el-form-item>
          <el-form-item
            label="适用地区："
            style="width: 50%"
          >
            <div
              v-if="JSON.stringify(data?.region)!==JSON.stringify(data?.Old?.region)"
              class="flow-status-color"
              style="display:flex;"
            >
              <area-list-view :areas="data?.Old?.region" />
              <span style="padding:0px 4px">--></span>
              <area-list-view :areas="data?.region" />
            </div>
            <div v-else>
              <area-list-view :areas="data?.region" />
            </div>
          </el-form-item>
          <el-form-item
            label="适用终端："
            style="width: 50%"
          >
            <div
              v-if="data?.terminalType!==data?.Old?.terminalType"
              class="flow-status-color"
            >
              <span>{{ getLabel('app_mode', data?.Old?.terminalType) }}</span>
              <span>--></span>
              <span>{{ getLabel('app_mode', data?.terminalType) }}</span>
            </div>
            <div v-else>
              <span>{{ getLabel('app_mode', data?.terminalType) }}</span>
            </div>
          </el-form-item>
          <el-form-item
            label="终端价："
            style="width: 50%"
          >
            <div
              v-if="data?.changeTerminalPrice"
              class="flow-status-color"
            >
              <span>{{ data?.Old?.terminalPrice }}元</span>
              <span v-if="data?.Old?.sellUnit"> / {{ getLabel('sell_unit', data?.Old?.sellUnit) }}</span>
              <span style="padding:0px 4px">--></span>
              <span>{{ data?.newTerminalPrice }}元</span>
              <span v-if="data?.Old?.sellUnit"> / {{ getLabel('sell_unit', data?.Old?.sellUnit) }}</span>
            </div>
            <div v-else>
              <span>{{ data?.Old?.terminalPrice }}元</span>
              <span v-if="data?.Old?.sellUnit"> / {{ getLabel('sell_unit', data?.Old?.sellUnit) }}</span>
            </div>
          </el-form-item>
          <el-form-item
            label="底价："
            style="width: 50%"
          >
            <div
              v-if="data?.guidingPrice!==data?.Old?.guidingPrice"
              class="flow-status-color"
            >
              <span>{{ data?.Old?.guidingPrice }}元</span>
              <span v-if="data?.Old?.sellUnit"> / {{ getLabel('sell_unit', data?.Old?.sellUnit) }}</span>
              <span style="padding:0px 4px">--></span>
              <span>{{ data?.guidingPrice }}元</span>
              <span v-if="data?.Old?.sellUnit"> / {{ getLabel('sell_unit', data?.Old?.sellUnit) }}</span>
            </div>
            <div v-else>
              <span>{{ data?.guidingPrice }}元</span>
              <span v-if="data?.Old?.sellUnit"> / {{ getLabel('sell_unit', data?.Old?.sellUnit) }}</span>
            </div>
          </el-form-item>

          <el-form-item
            label="变更原因："
            style="width: 50%"
          >
            <div>{{ data?.reason||'无' }}</div>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div
      class="table-list"
      style="margin-bottom:20px"
    >
      <div v-if="data?.Standards.length > 0 ">
        <div style="margin: 20px 0px">同时更新以下交易关系中终端价：</div>

        <el-table
          ref="multipleTable"
          header-cell-class-name="table-header"
          :data="data?.Standards"
          :border="true"
          style="width: 100%"
          max-height="400px"
        >
          <el-table-column
            property="terminalName"
            label="终端名称"
            header-align="center"
            :min-width="160"
            show-overflow-tooltip
            fixed="left"
          >
            <template #default="scope">
              <my-link
                :underline="false"
                @click="toTerminalDetail(scope.row)"
              >{{ scope.row.terminalName }}</my-link>
            </template>
          </el-table-column>
          <el-table-column
            label="所在地区"
            header-align="center"
            :min-width="140"
            show-overflow-tooltip
            fixed="left"
          >
            <template #default="scope">{{ scope.row.provinceName }} / {{ scope.row.cityName }} / {{
              scope.row.areaName
            }}
            </template>
          </el-table-column>

          <el-table-column
            property="terminalPrice"
            label="当前终端价（元）"
            header-align="center"
            align="center"
            :min-width="140"
            show-overflow-tooltip
          />
          <el-table-column
            label="新终端价（元）"
            header-align="center"
            align="center"
            :min-width="140"
            show-overflow-tooltip
          >
            <template #default="scope">{{ data.newTerminalPrice }}</template>
          </el-table-column>
          <el-table-column
            property="sellMode"
            label="营销模式"
            header-align="center"
            :min-width="120"
            show-overflow-tooltip
          >
            <template #default="scope">
              <span v-if="scope.row?.sellMode !== 'direct'">
                {{ scope.row?.agentAttribute === '1' ?'区域招商':'精细招商' }}
              </span>
              <span v-else> 终端直销</span>
            </template>
          </el-table-column>
          <el-table-column
            label="代理商名称"
            header-align="center"
            :min-width="160"
            show-overflow-tooltip
          >
            <template #default="scope">
              <div v-if="scope.row?.sellMode !== 'direct'">
                <div v-if="scope.row.agentDetail.agentType==='agent'">
                  {{ scope.row.agentDetail?.agentName }}
                </div>
                <div v-if="scope.row.agentDetail.agentType==='agent_person'">
                  {{ scope.row.agentDetail?.userName }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            property="tradePrice"
            label="交易价"
            header-align="center"
            align="center"
            :min-width="120"
            show-overflow-tooltip
          />
          <el-table-column
            property="address"
            label="配送费"
            header-align="center"
            align="center"
            :min-width="140"
            show-overflow-tooltip
            fixed="right"
          >
            <template #default="scope">
              <div v-if="scope.row.distributeContractDetails&&scope.row.distributeContractDetails.length">
                <distributors-view
                  placement="top"
                  :datas="scope.row.distributeContractDetails"
                  :unit="scope.row.productInfoDetail?.sellUnit"
                />
              </div>
              <div v-else>无配送商</div>
            </template>
          </el-table-column>
          <el-table-column
            property="headName"
            label="负责营销职员"
            header-align="center"
            :min-width="120"
            show-overflow-tooltip
            fixed="right"
          >
            <template #default="scope">
              <div>{{ scope.row.headName||'无' }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--终端详情-->
    <detail-drawer
      ref="terminalDrawer"
      custom-title
      :size-width="1000"
    >
      <template #title>
        <span>终端 {{ rowData?.terminalName }} </span>
      </template>
      <template
        v-if="terminalId"
        #contents
      >
        <div class="drawer-content">
          <div class="history-list">
            <terminal-info :id="terminalId" />
          </div>
        </div>
      </template>
    </detail-drawer>
  </div>
</template>

<script>
import { defineAsyncComponent, reactive, ref, toRefs, watch } from 'vue'

export default {
  name: 'ClientPriceBaseInfo',
  components: {
    terminalInfo: defineAsyncComponent(() =>
      import('@CRM/views/commonView/detailComponents/terminal/terminalInfo.vue')
    ),
  },
  props: {
    detailData: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, context) {
    var terminalDrawer = ref(null)
    var reactiveData = reactive({
      detailData: {},
      data: props.detailData.data,
      terminalId: 0,
      rowData: null,
    })
    const toTerminalDetail = (row) => {
      reactiveData.rowData = row
      reactiveData.terminalId = row.terminalId
      terminalDrawer.value.open()
    }
    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval) {
          reactiveData.detailData = newval
          reactiveData.data = newval.data
          console.log(232)
        }
      },
      { immediate: true, deep: true }
    )
    return {
      terminalDrawer,
      ...toRefs(props),
      ...toRefs(reactiveData),
      toTerminalDetail,
    }
  },
}
</script>

<style scoped>
</style>
